<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--新增按钮-->
        <el-button type="primary" @click="createAdd()">新增</el-button>
        <!--中间部分开始-->
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="图书编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="图书类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图书名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="图书描述">
                </el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="createUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteBook(scope.row)">删除</el-button>
                        <el-button type="primary" size="mini" @click="createUpdate1(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--中间部分结束-->
        <!-- 新增标签弹层 开始 -->
        <div class="add-form">
            <el-dialog title="新增图书" :visible.sync="dialogAddFormVisible">
                <el-form ref="dataAddForm" :model="addFormData"  label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="图书类别" prop="type">
                                <el-input v-model="addFormData.type"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="图书名称" prop="name">
                                <el-input v-model="addFormData.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="addFormData.description" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doAdd()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 新增标签弹层 结束 -->
        <!-- 修改 标签弹层 开始 -->
        <div class="update-form">
            <el-dialog title="修改图书" :visible.sync="dialogUpdateFormVisible">
                <el-form ref="dataAddForm" :model="updateFormData"  label-position="right" label-width="100px">
                    <el-row>
                        <el-col>
                            <el-form-item label="图书编号" prop="id">
                                <el-input v-model="updateFormData.id" readonly="readonly" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="图书类别" prop="type">
                                <el-input v-model="updateFormData.type"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="图书名称" prop="name">
                                <el-input v-model="updateFormData.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="updateFormData.description" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogUpdateFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="doUpdate()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 修改 标签弹层 结束 -->
    </div>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js" ></script>
<script src="../js/axios-0.18.0.js"></script>
    <script src="../js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"/>
<script>
    new Vue({
        el:"#app",
        mounted(){//页面加载触发的事件
           this.selectAll();
        },
        data(){
            return{
                tableData: [],//查询所有放在表格中显示的数据值
                dialogAddFormVisible: false,//控制新增表单是否可见
                dialogUpdateFormVisible:false,//控制修改表单是否可见
                addFormData: {},//新增表单数据
                updateFormData: {}//修改表单数据
            }
        },
        methods:{
            //查询所有的方法
            selectAll(){
                var _this=this;
                $.ajax({
                    url:"/books",
                    type:"get",
                    success:function(resp){
                        alert("返回数据为："+resp.data);
                        console.log(resp.data);
                        _this.tableData=resp.data;
                    },
                    complete :
                        function(XMLHttpRequest, textStatus) {
                            // 通过XMLHttpRequest取得响应头，sessionstatus
                            var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
                            if (sessionstatus == "TIMEOUT") {
                                var win = window;
                                while (win != win.top){
                                    win = win.top;
                                }
                                win.location.href= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                            }
                        }
                });



               /* var _this=this;
                axios.get("/books").then(function (resp){
                    //console.log(resp);
                    console.log(resp.data.data);
                    _this.tableData=resp.data.data;
                }).catch(function (){
                    alert("访问有误，请联系管理员！！！");
                })*/
            },
            //根据图书编号，删除图书
            deleteBook(row){
                var _this=this;
                axios.delete("/books/"+row.id).then(function (resp){
                    console.log(resp.data)
                    if(resp.data.code==20021){
                        _this.$message.success("删除成功");
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.error("删除失败");
                    }
                }).catch(function (){
                    alert("访问有误，请联系管理员！！！");
                })



            },
            //点击新增，创建新增窗口
            createAdd(){
                //显示新增弹框
                this.dialogAddFormVisible=true;
            },
            //点击编辑，创建修改窗口
            createUpdate(row){
                //显示修改弹框
                this.dialogUpdateFormVisible=true;
                //console.log(row);
                this.updateFormData=row;
            },
            //点击查看，创建修改窗口
            createUpdate1(row){
                //显示修改弹框
                this.dialogUpdateFormVisible=true;
                //console.log(row);
                var _this=this;
                //通过根据id查询相应的值
                axios.get("/books/"+row.id).then(function (resp){
                    _this.updateFormData=resp.data.data;
                }).catch(function (){
                    alert("路径错误！");
                })
            },
            //执行新增的操作
            doAdd(){
                var _this=this;
                axios.post("/books",this.addFormData).then(function (resp){
                    console.log(resp.data)
                    if(resp.data.code==20011){
                        _this.$message.success("新增成功");
                        //关闭新增窗口
                        _this.dialogAddFormVisible=false;
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.error("新增失败");
                    }
                }).catch(function (){
                    alert("访问有误，请联系管理员！！！");
                })
            },
            //执行修改的操作
            doUpdate(){
                var _this=this;
                axios.put("/books",this.updateFormData).then(function (resp){
                    console.log(resp.data)
                    if(resp.data.code==20031){
                        _this.$message.success("修改成功");
                        //关闭修改窗口
                        _this.dialogUpdateFormVisible=false;
                        //调用查询所有的方法
                        _this.selectAll();
                    }else{
                        _this.$message.error("修改失败");
                    }
                }).catch(function (){
                    alert("访问有误，请联系管理员！！！");
                })
            }
        }
    })
</script>
</body>
</html>